<template>
	<view class="price-view">
		<view class="search-view">
			<u-search :showAction="false" @click="goSearch" :disabled="true" height="37">
			</u-search>
		</view>
		
		<view class="container">
			<view class="img-name" v-if="item">
				<image :src="item[0].morebagPublishPictures[0].picture" mode="aspectFit"></image>
				<view class="name">
					{{item[0].commodity}}
				</view>
			</view>
			
			<view class="price">
				<view class="col-date wid-sty">
					<view class="title">
						{{$t("lookPrice.date")}}
					</view>
					<view class="content">
						<text v-for="item in dateList" :key="item.id">{{item.createTime.split(" ")[0]}}</text>
					</view>
				</view>
				<view class="col-time wid-sty">
					<view class="title">
						{{$t("lookPrice.time")}}
					</view>
					<view class="content">
						<text v-for="item in dateList" :key="item.id">{{item.createTime.split(" ")[1]}}</text>
					</view>
				</view>
				<view class="col-price wid-sty">
					<view class="title bor-none">
						{{$t("lookPrice.price")}}
					</view>
					<view class="bor-none content c-price">
						<text v-for="item in dateList" :key="item.id">{{item.money}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAllGoodsList } from "@/common/api.js"
	
	export default {
		data() {
			return {
				item: "",
				dateList: "",
				classificationId: ""
			}
		},
		methods: {
			goSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			async initBidData() {
				const { rows } = await getAllGoodsList({
					classificationId: this.classificationId,
					status: 3
				});
				console.log(rows);
				rows.sort((a, b) => {
					return b.money - a.money;
				});
				this.item = rows;
				this.dateList = rows;
			}
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("commDetail.sales")});
		},
		onLoad(option) {
			this.classificationId = JSON.parse(decodeURIComponent(option.classificationId))
			this.initBidData();
			console.log(this.item);
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	text {
		display: block;
		height: 65rpx;
	}
	
	.search-view {
		padding: 14rpx 22rpx;
		background-color: #fff;
	}
	
	.container {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	
	.img-name {
		height: 540rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #0000000C;
		
		image {
			height: 400rpx;
			width: 100%;
		}
		
		.name {
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			// width: 500rpx;
			text-align: left;
			margin-left: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 140rpx;
		}
	}
	
	.price {
		height: 686rpx;
		background-color: #FBFBFB;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		display: flex;
		// align-items: center;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #0000000C;

		.wid-sty {
			height: 586rpx;
			width: 33.3%;
			text-align: center;
			line-height: 100rpx;
			flex: 1;
		}
		
		.title {
			border-right: 2rpx solid #E8E8E8;
			border-bottom: 2rpx solid #E8E8E8;
		}
		
		.bor-none {
			border-right: none !important;
		}
		
		.content {
			height: 100%;
			border-right: 2rpx solid #E8E8E8;
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
		}
		
		.c-price {
			color: #FF0000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
		}
	}
</style>